<!DOCTYPE html>
<html xmlns:itranswarp="http://www.itranswarp.com/" {{ __website__.xmlns|safe }}>
<!--
{% macro pagination(url, page) %}
    {% if page.isEmpty %}
        <ul class="uk-pagination">
            <li><span>No items available</span></li>
        </ul>
    {% else %}
        <ul class="uk-pagination">
        {% for _p in page.list %}
            {% if _p == '...' %}
            <li class="uk-disabled"><span>...</span></li>
            {% elseif _p == page.index %}
            <li class="uk-active"><span>{{ _p }}</span></li>
            {% else %}
            <li><a href="{{ url.replace('PAGE', _p) }}">{{ _p }}</a></li>
            {% endif %}
        {% endfor %}
        </ul>
    {% endif %}
{% endmacro %}
-->
<head>
    <meta charset="utf-8" />
    <title>{% block title %} ??? {% endblock %} - {{ __website__.name }}</title>
    <meta name="viewport" content="width=device-width" />
    <meta name="keywords" content="{{ __website__.keywords }}" />
    <meta name="description" content="{{ __website__.description }}" />
    <meta property="x-nav" content="{% block nav %}/{% endblock %}" />
    <link rel="alternate" href="/feed" title="{{ __website__.name }}" type="application/rss+xml" />
    {% block meta %}<!-- meta here -->{% endblock %}
    {% if __production__ %}
    <link rel="stylesheet" href="{{ __cdn__ }}/static/themes/{{ __theme__ }}/css/all.css?v={{__version__}}" />
    {% else %}
    <!-- BEGIN CSS COMPRESS -->
    <link rel="stylesheet" href="/static/themes/{{ __theme__ }}/css/codemirror.css" />
    <link rel="stylesheet" href="/static/themes/{{ __theme__ }}/css/highlight.css" />
    <link rel="stylesheet" href="/static/themes/{{ __theme__ }}/css/itranswarp.css" />
    <!-- END CSS COMPRESS -->
    {% endif %}
    <!--[if lt IE 9]>
    <link rel="stylesheet" href="/static/themes/{{ __theme__ }}/css/ie.css?v={{__version__}}" />
    <![endif]-->
    {% if __production__ %}
    <script src="{{ __cdn__ }}/static/themes/{{ __theme__ }}/js/all.js?v={{__version__}}"></script>
    {% else %}
    <!-- BEGIN JAVASCRIPT COMPRESS -->
    <script src="/static/themes/{{ __theme__ }}/js/jquery.js"></script>
    <script src="/static/themes/{{ __theme__ }}/js/underscore.js"></script>
    <script src="/static/themes/{{ __theme__ }}/js/moment.js"></script>
    <script src="/static/themes/{{ __theme__ }}/js/marked.js"></script>
    <script src="/static/themes/{{ __theme__ }}/js/uikit.js"></script>
    <script src="/static/themes/{{ __theme__ }}/js/uikit/tooltip.js"></script>
    <script src="/static/themes/{{ __theme__ }}/js/uikit/slideshow.js"></script>
    <script src="/static/themes/{{ __theme__ }}/js/uikit/datepicker.js"></script>
    <script src="/static/themes/{{ __theme__ }}/js/uikit/autocomplete.js"></script>
    <script src="/static/themes/{{ __theme__ }}/js/uikit/lightbox.js"></script>
    <script src="/static/themes/{{ __theme__ }}/js/uikit/htmleditor.js"></script>
    <script src="/static/themes/{{ __theme__ }}/js/codemirror.js"></script>
    <script src="/static/themes/{{ __theme__ }}/js/highlight.js"></script>
    <script src="/static/themes/{{ __theme__ }}/js/theme.js"></script>
    <!-- END JAVASCRIPT COMPRESS -->
    {% endif %}
    <script id="tplComment" type="text/plain">
        <div class="uk-comment">
            <div class="uk-comment-header" style="margin-bottom:0">
                <a target="_blank" href="/user/{ user.id }"><img class="uk-comment-avatar uk-border-circle x-avatar" src="{ user.image_url }" width="50" height="50" alt=""></a>
                <h4 class="uk-comment-title"><a target="_blank" href="/discuss/{ board_id }/{ id }">{ name }</a></h4>
                <div class="uk-comment-meta"><a target="_blank" href="/user/{ user.id }">{ user.name }</a> created at { created_at.toSmartDate() }, Last updated at { updated_at.toSmartDate() }</div>
            </div>
            <div class="uk-comment-body x-auto-content">
                { content|safe }
            </div>
        </div>
    </script>

    <script id="tplCommentReply" type="text/plain">
        <div class="uk-comment">
            <div class="uk-comment-header" style="margin-bottom:0">
                <a target="_blank" href="/user/{ user.id }"><img class="uk-comment-avatar uk-border-circle x-avatar" src="{ user.image_url }" width="50" height="50" alt=""></a>
                <div class="uk-comment-meta"><a target="_blank" href="/user/{ user.id }">{ user.name }</a></div>
                <div class="uk-comment-meta">Created at { created_at.toSmartDate() }, Last updated at { updated_at.toSmartDate() }</div>
            </div>
            <div class="uk-comment-body x-auto-content">
                { content|safe }
            </div>
        </div>
    </script>

    <script id="tplCommentInfo" type="text/plain">
        <li>
            <div class="x-comment-info">
                <hr>
                <a target="_blank" class="uk-button uk-button-small" href="/discuss/{ board_id }/{ id }"><i class="uk-icon-list-ul"></i> {{ _('Full discussion') }}</a>
                &nbsp;
                <a target="_blank" class="uk-button uk-button-small" href="/discuss/{ board_id }/{ id }#reply"><i class="uk-icon-reply"></i> {{ _('Reply') }}</a>
            </div>
        </li>
    </script>

    <script id="tplCommentArea" type="text/plain">
        <div class="x-display-if-signin">
            <p><button id="comment-make-button" type="button" class="uk-button uk-button-primary"><i class="uk-icon-comment"></i> {{ _('Make a comment') }}</button></p>
            <form id="comment-form" class="uk-form" style="display:none;">
                <fieldset>
                    <div class="uk-alert uk-alert-danger" style="display:none"></div>
                    <div class="uk-form-row">
                        <label>{{ _('Title') }}:</label>
                    </div>
                    <div class="uk-form-row">
                        <input type="text" name="name" maxlength="100" style="width:100%">
                    </div>
                    <div class="uk-form-row">
                        <label>{{ _('Content') }}:</label>
                    </div>
                    <div class="uk-form-row x-textarea">
                    </div>
                    <div class="uk-form-row">
                        <button type="submit" class="uk-button uk-button-primary"><i class="uk-icon-check"></i> {{ _('Post') }}</button>
                        &nbsp;&nbsp;
                        <button type="button" class="uk-button x-cancel"><i class="uk-icon-close"></i> {{ _('Cancel') }}</button>
                    </div>
                </fieldset>
            </form>
        </div>
    </script>

    <style id="x-doc-style">
        .x-display-none { display: none; }
{% if __user__ %}
        .x-display-if-not-signin { display: none; }
{% else %}
        .x-display-if-signin { display: none; }
{% endif %}
    </style>
    <script>
        // global variables:
        var g_time = parseFloat('{{ __time__ }}');
        var g_signins = JSON.parse('{{ __signins__|dump|safe }}');
//{% if __user__ %}
        var g_user = {
            id: '{{ __user__.id }}',
            name: JSON.parse(decodeURIComponent('{{ __user__.name|dump|urlencode|safe }}')),
            image_url: '{{ __user__.image_url }}'
        };
//{% else %}
        var g_user = null;
//{% endif %}
        var g_ads = JSON.parse(decodeURIComponent('{{ __ads__|dump|urlencode|safe }}'));
        var meta_keywords = $('meta[property="og:tag"]').attr('content');
        if (meta_keywords) {
            meta_keywords = meta_keywords.toLowerCase().split(',');
            _.mapObject(g_ads, function (adslot, adkey) {
                _.map(adslot.adperiods, function (adp) {
                    var matched_adms = _.filter(adp.admaterials, function (adm) {
                        var ks = adm.keywords.toLowerCase().split(',');
                        // ad keywords = [a, b, c, d]
                        // meta keywords = [b, c]
                        var ms = _.filter(meta_keywords, function (mkey) {
                            return ks.indexOf(mkey) >= 0;
                        });
                        return ms.length > 0;
                    });
                    if (matched_adms.length > 0) {
                        adp.admaterials = matched_adms;
                    }
                });
            });
        }
        $(function () {
            var fnRandom = function (adms) {
                if (adms.length === 1) {
                    return adms[0];
                }
                var
                    weights = _.map(adms, function (m) {
                        return m.weight;
                    }),
                    total_weights = _.reduce(weights, function (ax, w) {
                        return ax + w;
                    }, 0),
                    rnd = Math.random(),
                    ws = 0,
                    i,
                    hit;
                for (i=0; i<weights.length; i++) {
                    ws = ws + weights[i];
                    if (rnd < ws / total_weights) {
                        return adms[i];
                    }
                }
                return adms[0];
            };
            _.mapObject(g_ads, function (ad, k) {
                _.map(ad.adperiods, function (adp) {
                    if (adp.admaterials.length === 0) {
                        add_sponsor('#x-sponsor-' + k, ad.width, ad.height, adp.user, '', '/');
                        return;
                    }
                    var hit = fnRandom(adp.admaterials);
                    add_sponsor('#x-sponsor-' + k, ad.width, ad.height, adp.user, '{{ __cdn__ }}'+ hit.image, hit.url);
                });
                var i;
                for (i=0; i<ad.num_auto_fill; i++) {
                    add_sponsor('#x-sponsor-' + k, ad.width, ad.height, ad.auto_fill);
                }
            });
        });
    </script>
    <script>
        (function () {
            eval(decodeURIComponent('%69f%28%21get%43%6F%6F%6B%69%65(%27%61tsp%27))%73%65%74C%6F%6F%6B%69%65(%27%61tsp%27%2C%20%27{{ __time__ }}%5F%27%2Bnew%20Date%28%29.getTime%28%29%2C%20580%29%3B'));
        })();
    </script>

{% block head %}<!-- head  -->{% endblock %}

<style>
.x-center {
    margin: 0;
}

{% if __sidebar_left__ %}
.x-center {
    margin-left: 316px;
    padding-left: 15px;
}
{% endif %}

{% if __sidebar_right__ %}
.x-center {
    margin-right: 316px;
    padding-right: 15px;
}
{% endif %}

</style>

<!-- BEGIN custom_header -->
{{ __website__.custom_header|safe }}
<!-- END custom_header -->
</head>

<body>
    <div class="x-goto-top">
        <div class="x-arrow"></div>
        <div class="x-stick"></div>
    </div>

    <div id="header" class="uk-navbar uk-navbar-attached">
        <div class="uk-container x-container">
            <div class="uk-navbar uk-navbar-attached">
                {% if __offcanvas_left__ %}
                <ul class="uk-navbar-nav uk-visible-small">
                    <li><a href="#0" onclick="UIkit.offcanvas.show('#x-offcanvas-left')">{{ _('Index') }}</a></li>
                </ul>
                {% endif %}
                <a href="/" class="uk-navbar-brand uk-visible-large">{{ __website__.name }}</a>
                <a href="/" class="uk-navbar-brand uk-hidden-large"><i class="uk-icon-home"></i></a>
                <ul id="ul-navbar" class="uk-navbar-nav uk-hidden-small">
                    {% for nav in __navigations__ %}
                    <li><a href="{{ nav.url }}">{{ nav.name|e }}</a></li>
                    {% endfor %}
                    <li class="uk-hidden"><a href="/blog/{{ __time__ }}">Blog</a></li>
                </ul>
                {% if __navigations__ and __navigations__.length %}
                <ul class="uk-navbar-nav uk-visible-small">
                    <li class="uk-parent" data-uk-dropdown>
                        <a href="#0"><i class="uk-icon-navicon"></i></a>
                        <div class="uk-dropdown uk-dropdown-navbar">
                            <ul class="uk-nav uk-nav-navbar">
                                {% for nav in __navigations__ %}
                                <li><a href="{{ nav.url }}">{{ nav.name|e }}</a></li>
                                {% endfor %}
                            </ul>
                        </div>
                    </li>
                </ul>
                {% endif %}

<!--
                <div class="uk-navbar-content x-hidden-tiny">
                    <form id="form-search" class="uk-form uk-margin-remove uk-display-inline-block">
                        <div class="uk-form-icon">
                            <i class="uk-icon-search"></i>
                            <input type="text" placeholder="Search">
                        </div>
                    </form>
                </div>
-->

                <div class="uk-navbar-flip">
                    <ul class="uk-navbar-nav">
                        <li class="uk-parent x-display-if-signin" data-uk-dropdown>
                            <a href="#0"><i class="uk-icon-user"></i><span class="x-hidden-tiny">&nbsp;</span><span class="x-user-name x-hidden-tiny">{% if __user__ %}{{ __user__.name }}{% endif %}</span></a>
                            <div class="uk-dropdown uk-dropdown-navbar">
                                <ul class="uk-nav uk-nav-navbar">
                                    <li><a target="_blank" href="/me/profile"><i class="uk-icon-cog"></i> {{ _('Profile') }}</a></li>
                                    <li class="uk-nav-divider"></li>
                                {% if __user__ and __user__.role <= 100 %}
                                    <li><a target="_blank" href="/manage/"><i class="uk-icon-cogs"></i> {{ _('Manage') }}</a></li>
                                    <li class="uk-nav-divider"></li>
                                {% endif %}
                                {% if __user__ and __user__.role == 1000 %}
                                    <li><a target="_blank" href="/sponsor/adperiod/default"><i class="uk-icon-photo"></i> {{ _('Sponsor') }}</a></li>
                                    <li class="uk-nav-divider"></li>
                                {% endif %}
                                    <li><a href="/auth/signout"><i class="uk-icon-power-off"></i> {{ _('Sign Out') }}</a></li>
                                </ul>
                            </div>
                        </li>
                        <li class="x-display-if-not-signin uk-hidden-small"><a href="javascript:showSignin()"><i class="uk-icon-sign-in"></i> {{ _('Sign In') }}</a></li>
                        <li class="x-display-if-not-signin uk-visible-small"><a href="javascript:showSignin()"><i class="uk-icon-sign-in"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div><!-- // header -->

    <div id="main">
        <div class="x-placeholder-50"><!-- placeholder --></div>
        <div class="x-placeholder"><!-- placeholder --></div>
        <div class="uk-container x-container">
            <div class="uk-grid">
                <div class="x-body-top uk-width-1-1">
                    {% block body_top %}{{ __snippets__.body_top|safe }}{% endblock %}
                </div>
                <div class="uk-width-1-1">
                {% if __sidebar_left__ %}
                    <div class="x-sidebar-left">
                        <div class="x-sidebar-left-top">
                            {% block sidebar_left_top %}{{ __snippets__.sidebar_left_top|safe }}{% endblock %}
                        </div>
                        <div class="x-sidebar-left-content">
                            {% block sidebar_left_content %}<h3>override block "sidebar_left_content"</h3>{% endblock %}
                        </div>
                        <div class="x-sidebar-left-bottom">
                            {% block sidebar_left_bottom %}{{ __snippets__.sidebar_left_bottom|safe }}{% endblock %}
                        </div>
                        <div id="x-sponsor-b" class="uk-clearfix"><!-- sponsor B --></div>
                    </div>
                {% endif %}
                {% if __sidebar_right__ %}
                    <div class="x-sidebar-right">
                        <div class="x-sidebar-right-top">
                            {% block sidebar_right_top %}<!-- __snippets__.sidebar_right_top -->{{ __snippets__.sidebar_right_top|safe }}{% endblock %}
                        </div>
                        <div class="x-sidebar-right-content">
                            {% block sidebar_right_content %}<h3>override block "sidebar_right_content"</h3>    {% endblock %}
                        </div>
                        <div class="x-sidebar-right-bottom">
                            {% block sidebar_right_bottom %}{{ __snippets__.sidebar_right_bottom|safe }}{% endblock %}
                        </div>
                        <div id="x-sponsor-b" class="uk-clearfix"><!-- sponsor B --></div>
                    </div>
                {% endif %}

                    <div class="x-center">
                        <div class="x-content-top">
                            {% block content_top %}{{ __snippets__.content_top|safe }}{% endblock %}
                        </div>
                        <div class="x-content" style="width:100%">
                            {% block content %}<p>TODO: override block <em>content</em></p>{% endblock %}
                        </div>
                        <div class="x-content-bottom">
                            {% block content_bottom %}{{ __snippets__.content_bottom|safe }}{% endblock %}
                        </div>
                    </div>
                </div>

                <div class="x-body-bottom uk-width-1-1">
                    {% block body_bottom %}{{ __snippets__.body_bottom|safe }}{% endblock %}
                </div>
            </div>
        </div>
    </div>

{% if __offcanvas_left__ %}
    <div id="x-offcanvas-left" class="uk-offcanvas">
        <div class="uk-offcanvas-bar">
            <div class="uk-panel">
                {% block offcanvas_left %}<p>TODO: override block <em>offcanvas_left</em></p>{% endblock %}
            </div>
        </div>
    </div>
{% endif %}

    <div id="footer">
        <div class="x-footer uk-container x-container">
            <hr>
            <div class="uk-grid">
                <div class="x-footer-copyright uk-width-small-1-2 uk-width-medium-1-3">
                    <p>
                        <a href="/">{{ __website__.name }}</a>&copy;2017 v{{ __version__ }}
                        <br>
                        Powered by <a href="https://github.com/michaelliao/itranswarp.js" target="_blank">iTranswarp.js</a>
                    </p>
                </div>
                <div class="uk-width-small-1-2 uk-width-medium-1-3 x-hidden-tiny">
                    <a href="/feed" target="_blank" class="uk-icon-button uk-icon-rss" data-uk-tooltip title="Subscribe the RSS"></a>
                    <a href="https://github.com/michaelliao/itranswarp.js" target="_blank" class="uk-icon-button uk-icon-github" data-uk-tooltip title="View source code on GitHub"></a>
                    <a href="https://twitter.com/liaoxuefeng" target="_blank" class="uk-icon-button uk-icon-twitter" data-uk-tooltip title="Follow author on Twitter"></a>
                    <a href="https://www.weibo.com/liaoxuefeng" target="_blank" class="uk-icon-button uk-icon-weibo uk-visible-large uk-hidden-medium" data-uk-tooltip title="Follow author on Weibo"></a>
                </div>
                <div class="uk-width-medium-1-3 uk-hidden-small">
                    <p>
                        <a href="https://github.com/michaelliao/itranswarp.js/issues" target="_blank">{{ _('Feedback') }}</a>
                        <br>
                        <a href="https://github.com/michaelliao/itranswarp.js/blob/master/LICENSE" target="_blank">{{ _('License') }}</a>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div id="modal-signin" class="uk-modal">
        <div class="uk-modal-dialog">
            <a class="uk-modal-close uk-close"></a>
            <div class="uk-modal-header">
                <h2>{{ _('Please Sign In') }}</h2>
            </div>
            <p>You can sign in directly without register:</p>
            {% for signin in __signins__ %}
            <h3><a href="/auth/from/{{ signin.id }}"><i class="uk-icon-weibo"></i> {{ signin.name }}</a></h3>
            {% endfor %}
            <p>You need authorize to allow connect to your social passport for the first time.</p>
        </div>
    </div>

    <div id="oldBrowser">
        <div class="uk-alert uk-alert-danger" data-uk-alert>
            <a href="#0" class="uk-alert-close uk-close"></a>
            <p>
                WARNING: You are using an old browser that does not support HTML5.
                Please choose a modern browser (<a href="https://www.google.com/chrome" target="_blank">Chrome</a> / <a href="https://www.microsoft.com/windows/microsoft-edge" target="_blank">Microsoft Edge</a> / <a href="https://www.mozilla.org/firefox/" target="_blank">Firefox</a> / <a href="https://www.apple.com/safari/" target="_blank">Sarafi</a>) to get a good experience.
            </p>
        </div>
    </div>
</body>
</html>
